<template>
  <div class="dialog-wrapper">
    <el-dialog
      :visible.sync="fitVisible"
      title="BOM明细"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      @close="handleCancel"
    >
      <el-card shadow="never" class="aui-card--fill managementWrapper">
        <div class="verticalCenter top-wrapper">
          <div class="top-left overHidden">
            <span style="color: #666">产品名称：</span>
            <el-tooltip
              class="item"
              effect="light"
              :content="bomRawSource.product_name"
              placement="top"
            >
              <span>{{ bomRawSource.product_name }}</span>
            </el-tooltip>
          </div>
          <div class="top-right overHidden">
            <span style="color: #666">规格：</span>
            <el-tooltip
              class="item"
              effect="light"
              :content="bomRawSource.sku_name"
              placement="top"
            >
              <span>{{ bomRawSource.sku_name }}</span>
            </el-tooltip>
          </div>
        </div>
        <div class="mod-sys__user">
          <el-table :data="bomRawSource.bom_sub" style="width: 100%" border>
            <el-table-column
              type="index"
              label="序号"
              header-align="center"
              align="center"
              width="80"
            ></el-table-column>
            <el-table-column
              prop="material_serial"
              label="物料编码"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="name"
              label="物料名称"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="specifications_model"
              label="规格型号"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="total"
              label="所需数量"
              header-align="center"
              align="center"
            >
            </el-table-column>
            <el-table-column
              :label="$t('handle')"
              fixed="right"
              header-align="center"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button type="text" size="small" @click="toSupply(scope)"
                  >选择执行单位</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-card>
      <template slot="footer">
        <el-button @click="handleCancel">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="handleBomSave">{{
          $t('confirm')
        }}</el-button>
      </template>
      <ChooseSupply
        v-if="supplyVisible"
        ref="supply"
        @handleClose="supplyClose"
        @supplyConfirm="supplyConfirm"
        :supplyData="supplyData"
        :chooseBomObj="chooseBomObj"
      ></ChooseSupply>
    </el-dialog>
  </div>
</template>

<script>
import ChooseSupply from './choose-supply'
import { getSupplierBomList } from '@/api'
export default {
  components: {
    ChooseSupply,
  },
  props: {
    bomRawSource: {
      type: Object,
    },
    isAdd: {
      type: Boolean,
      default: true,
    },
  },
  data() {
    return {
      dataForm: {},
      fitVisible: true,
      supplyVisible: false,
      supplyData: [],
      chooseBomObj: {},
      // 默认绑定供应商数据到对应物料
      materialChooseSupplyListObj: {},
      currentChooseBomSubId: '',
      currentChooseIndex: 0,
      materialChooseSupplyList: [],
    }
  },
  watch: {
    bomRawSource: {
      handler(val, oldVal) {
        console.log(val)
        this.initSupply()
      },
      immediate: true,
      // deep: true,
    },
  },
  activated() {
    // this.query();
    // this.dataForm = { ...this.bomRawSource };
  },
  methods: {
    handleBomSave() {
      let arr = []
      // for (let key in this.materialChooseSupplyListObj) {
      //   arr.push(this.materialChooseSupplyListObj[key])
      // }
      console.log(this.materialChooseSupplyList)
      console.log(this.materialChooseSupplyList[this.currentChooseIndex])

      console.log(arr)
      // debugger
      // return
      this.$emit('handleConfirm', this.materialChooseSupplyList)
    },
    // 各物料请求供应商列表接口默认绑定值
    async initSupply() {
      console.log(this.bomRawSource)
      // const source = JSON.parse(JSON.stringify(this.bomRawSource));
      const source = this.bomRawSource
      console.log(source)
      const subData = source?.fill_bom_sub
        ? source.fill_bom_sub
        : source.bom_sub
      // debugger
      // 编辑 不用请求数据，套用接口返回数据
      if (source?.fill_bom_sub) {
        console.log(subData)
        // debugger
        subData.forEach((item) => {
          console.log(item)
          item.execute_list.forEach((it) => {
            it.name = it.supplier_name
            it.username = it.supplier_username
            it.phone = it.supplier_phone
            // debugger
          })
          const temp = {
            supplyList: item?.supplyList ? item.supplyList : item.execute_list,
            ...item,
          }
          const key = item.id
          // debugger
          this.materialChooseSupplyList.push(temp)
          // this.materialChooseSupplyListObj[key] = temp;
          // debugger
        })
        console.log(this.materialChooseSupplyList)
        return
      }
      try {
        let arr = []
        subData.forEach((item) => {
          const { material_id } = item
          const params = {
            material_id,
            page: 1,
            num: 9999,
          }
          arr.push(getSupplierBomList(params))
        })
        let that = this
        await Promise.all(arr).then((res) => {
          console.log(res)
          console.log(source)
          subData.forEach((item, index) => {
            // 供应商数据处理
            const list = res[index].list
            list.forEach((it) => {
              it.num = 0
            })
            list[0].num = item.total

            // execute_list 默认赋值
            let dataList = []
            list.forEach((item) =>
              dataList.push({
                id: 0,
                supplier_id: item.id,
                num: item.num,
              })
            )
            const temp = {
              id: 0,
              bom_sub_id: item.id,
              material_id: item.material_id,
              total: item.total,
              supplyList: list,
              execute_list: dataList,
            }
            // const key = item.id
            // debugger
            this.materialChooseSupplyList.push(temp)
            // that.materialChooseSupplyList[key] = temp;
          })
        })
      } catch (err) {}
      console.log(this.materialChooseSupplyList)
    },
    supplyConfirm(data) {
      this.supplyVisible = false
      // const key = this.chooseBomObj.bom_sub_id
      // console.log(this.chooseBomObj)
      let index = this.currentChooseIndex
      this.materialChooseSupplyList[index].execute_list = data.confirmData
      this.materialChooseSupplyList[index].supplyList = data.tableData
      // debugger
      // this.materialChooseSupplyListObj[key].execute_list = data.confirmData;
      // this.materialChooseSupplyListObj[key].supplyList = data.tableData;
    },
    toSupply(scope) {
      // currentChooseIndex
      let row = scope.row
      let index = scope.$index
      this.currentChooseIndex = index
      console.log(this.materialChooseSupplyList)
      console.log(row)
      // debugger
      this.supplyData = this.materialChooseSupplyList[index].supplyList
      const { product_name, sku_name } = this.bomRawSource
      const { id, ...other } = row
      this.chooseBomObj = { product_name, sku_name, bom_sub_id: id, ...other }
      console.log(this.chooseBomObj)
      this.supplyVisible = true
    },
    supplyClose() {
      this.supplyVisible = false
    },
    handleCancel() {
      this.$emit('handleClose')
    },
  },
}
</script>

<style lang="scss" scoped>
.dialog-wrapper {
  ::v-deep .el-dialog {
    width: 60% !important;
  }
  .managementWrapper {
    .top-wrapper {
      font-size: 16px;
      margin-bottom: 24px;
      .top-left {
        max-width: 20vw;
      }
      .top-right {
        margin-left: 24px;
        max-width: 10vw;
      }
    }
    .prodBox {
      padding-left: 6px;
      .imgBox {
        width: 64px;
        height: 64px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .rightBox {
        margin-left: 14px;
        text-align: left;
        .top {
          max-width: 200px;
          margin-bottom: 6px;
        }
        .bottom {
          color: $mainColor;
        }
      }
    }
  }
}
</style>

<style lang="scss">
::v-deep .el-dialog__footer {
  border-top: 1px solid #f4f4f4 !important;
  padding: 16px 20px 16px !important;
}
</style>
